import { TabBar } from "antd-mobile";
import { Outlet, useLocation, useNavigate } from "umi";
import "./home.scss";

const tabs = [
  { key: "/films", title: "电影" },
  { key: "/cinemas", title: "影院" },
  { key: "/posts", title: "资讯" },
  { key: "/center", title: "我的" },
];

const HomeLayout = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  const handleChange = (key: string) => {
    // 直接使用 key 做路由跳转即可
    navigate(key);
  };

  return (
    <div className="home-layout">
      <Outlet />

      <div>
        <TabBar defaultActiveKey={pathname} onChange={handleChange}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};

export default HomeLayout;
